<template>
  <div class="income">
    <div class="head">
      <div class="h-head">
        <div class="left" @click="$router.back(-1)">
          <img src="../../assets/left.png" alt />
        </div>
        <div class="right">收益明细（BTC）</div>
      </div>
    </div>
    <div class="in_head">
      <div class="ll1">
        <div class="tt1">
          <span class="ddh">订单号:<span style="color:#8A8A8A">123456789012345678</span> </span>
          <div class="ff">正常发放</div>
        </div>
        <div class="tt2" @click="openPicker">
          <span>{{year}}-{{month}}</span>
          <div class="sjx"></div>
        </div>
      </div>
      <div class="ll2">
        <p>币种：<span style="color:#8A8A8A">BTC</span></p>
        <p>算力：<span style="color:#8A8A8A">1T</span></p>
        <p>功耗：<span style="color:#8A8A8A">0.085KW/h</span></p>
      </div>
    </div>
    <div class="in_list">
      <div class="one">
        <img src="../../assets/b_yuan.png" alt />
        <p>2019-10-14 10:13:20</p>
      </div>
      <div class="two">
        <span style="color:#8A8A8A">0.00001933</span>
        <span style="color:#8A8A8A">0.00001933</span>
        <span style="color:#8A8A8A">2019-10-14</span>
      </div>
      <div class="three">
        <span>总收益</span>
        <span>净收益</span>
        <span>收益日期</span>
      </div>
    </div>
    <mt-datetime-picker
      v-model="pickerVisible"
      ref="picker"
      type="date"
      year-format="{value}"
      month-format="{value}"
      @confirm="handleConfirm"
    ></mt-datetime-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerVisible: "",
      selectedValue: '',
      year:'',
      month:'',
    };
  },

  created: function() {},
  mounted() {
    let cc = new Date();
    this.year = cc.getFullYear();
    this.month = cc.getMonth()+1;
  },
  methods: {
    openPicker() {
      if (this.selectedValue) {
        this.pickerVisible = this.selectedValue;
      } else {
        this.pickerVisible = new Date();
      }
      this.$refs.picker.open();
      this.$refs.picker.$el.getElementsByClassName(
        "picker-slot"
      )[2].style.display = "none";
    },
    handleConfirm() {
      this.selectedValue = new Date(this.pickerVisible);
      this.year = this.selectedValue.getFullYear();
      this.month = this.selectedValue.getMonth()+1;  
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.income {
  .head {
    color: #fefeff;
    height: 1.893333rem;
    width: 100%;
    background: url(../../assets/p_bag.png) no-repeat;
    background-size: cover;
    .f-flex();
  }
  .h-head {
    color: #fefeff;
    width: 100%;
    .f-flex();
    justify-content: center;
    .left {
      left: 0.346667rem;
      position: absolute;
      .f-flex();
      font-size: 0.64rem;
      img {
        width: 0.293333rem;
        height: 0.48rem;
        margin-right: 0.266667rem;
      }
    }
    .right {
      font-size: 0.48rem;
      font-weight: bold;
      text-align: center;
    }
  }
  .in_head {
    width: 9.6rem;
    padding-top: 0.266667rem;
    padding-bottom: 0.266667rem;
    margin-left: 0.2rem;
    border-bottom: 1px solid #999;
    .ll1 {
      .f-flex();
      justify-content: space-between;
      .tt1 {
        .f-flex();
        font-size: 0.4rem;
        color: #000;
        .ff {
          margin-left: 0.213333rem;
          padding: 2px 4px;
          font-size: 0.24rem;
          background: #546ce3;
          color: #fff;
        }
      }
      .tt2 {
        color: #000;
        .f-flex();
        .sjx {
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #546ce3;
          margin-left: 0.213333rem;
        }
      }
    }
    .ll2 {
      .f-flex();
      justify-content: space-around;
      margin-top: 0.48rem;
    }
  }
  .in_list {
    padding-top: 0.266667rem;
    padding-bottom: 0.266667rem;
    border-bottom: 1px solid #999;
    margin-left: 0.2rem;
    color: #000;
    .one {
      .f-flex();
      img {
        width: 0.213333rem;
        height: 0.213333rem;
        margin-right: 0.133333rem;
      }
    }
    .two {
      .f-flex();
      justify-content: space-around;
      margin-top: 0.373333rem;
      margin-bottom: 0.106667rem;
    }
    .three {
      .f-flex();
      justify-content: space-around;
      margin-bottom: 0.106667rem;
    }
  }
}
</style>

